import { useState } from "react";
import { View } from "@tarojs/components";

import TabsTag from "@/components/app/TabsTag";
import PaneContractInfo from "./PaneContractInfo";
import PaneMaterialInfo from "./PaneMaterialInfo";
import ProjectBaseInfo from "./ProjectBaseInfo";
import ProjectExtenceInfo from "./ProjectExtenceInfo";
import PaneReceivePayment from "./PaneReceivePayment";

import ByCellGroup from "@/components/ui/ByCellGroup";
import { ByPopupBottomEvent } from "@/components/ui/ByPopupBottom";

import ApiWork from "@/api/work";
import useFetch from "@/hooks/useFetch";

import { ContractInfo } from "@/types/contract";
import PopupContainer from "@/components/app/PopupContainer";

const tabs = [
  { label: "基本信息", value: 0 },
  { label: "合同信息", value: 1 },
  { label: "收款信息", value: 2 },
  { label: "材料信息", value: 3 },
];

type PopupInfoProps = {
  source: any;
  intentCustomerId: number;
};
export default ({
  source,
  intentCustomerId,
  onCancel,
}: PopupInfoProps & ByPopupBottomEvent) => {
  const [active, setActive] = useState(0);

  const { data } = useFetch<ContractInfo>(ApiWork.getContractInfo, {
    defaultParams: [{ intentCustomerId }],
    onAfter: (res) => res.contractInfo,
  });

  return (
    <PopupContainer title="项目信息" onCancel={onCancel}>
      <View className="px-3">
        <TabsTag items={tabs} active={active} onChange={setActive} />

        <View className="h-[70vh] overflow-auto">
          {active == 1 ? (
            // 合同信息
            <PaneContractInfo data={data} />
          ) : active == 2 ? (
            <PaneReceivePayment />
          ) : active == 3 ? (
            <PaneMaterialInfo data={data} />
          ) : (
            <>
              <ByCellGroup title="基本信息" className="mt-6">
                <ProjectBaseInfo source={source} />
              </ByCellGroup>

              <ByCellGroup title="扩展信息" className="mt-6">
                <ProjectExtenceInfo source={source} />
              </ByCellGroup>
            </>
          )}
        </View>
      </View>
    </PopupContainer>
  );
};
